'use client'
import React, { useState } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'
import {
  Breadcrumb,
  Button,
  Col,
  Flex,
  Form,
  Input,
  Row,
  Select,
  Typography,
  DatePicker,
  Table,
  Alert
} from 'antd'
import Amap from '@/components/Amap'
const { RangePicker } = DatePicker

export default function page() {
  // 保存选择的日期
  const [selectedDate, setSelectedDate] = useState(null)
  // 预设日期
  const rangePresets = [
    {
      label: '最近一周',
      value: [dayjs().add(-7, 'd'), dayjs()]
    },
    {
      label: '最近一个月',
      value: [dayjs().add(-30, 'd'), dayjs()]
    },
    {
      label: '最近三个月',
      value: [dayjs().add(-90, 'd'), dayjs()]
    }
  ]
  // 日期切换获取日期
  const onRangeChange = (dates, dateStrings) => {
    if (dates) {
      console.log('From: ', dates[0], ', to: ', dates[1])
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
      setSelectedDate(dates)
      console.log(dates)
    } else {
      console.log('Clear')
    }
  }
  // 重置日期
  const handleReset = () => {
    setSelectedDate(null)
  }
  // 保存表格中选中的项
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 表格中是否有选中
  const hasSelected = selectedRowKeys.length > 0
  return (
    <>
      <Row className="breadcrumb">
        <Col span={24}>
          <Breadcrumb
            items={[
              { title: '首页' },
              { title: '商家管理' },
              { title: '入驻商家管理' }
            ]}
          />
        </Col>
      </Row>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>信息管理</Typography.Title>
            {/* <Button type="primary" icon={<PlusOutlined />}>
              新增商家
            </Button> */}
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Form layout="inline">
            <Form.Item label="商家名称：" name="seller_name">
              <Input />
            </Form.Item>
            <Form.Item label="负责人联系方式：" name="">
              <Input type="phone" />
            </Form.Item>
            <Form.Item label="审核状态：" name="sh" initialValue={'0'}>
              <Select
                style={{ width: 120 }}
                onChange={() => {}}
                options={[
                  {
                    value: '0',
                    label: '全部'
                  },
                  {
                    value: '1',
                    label: '待审批'
                  },
                  {
                    value: '2',
                    label: '不通过'
                  }
                ]}
              />
            </Form.Item>
            <Form.Item label="申请日期">
              <RangePicker
                value={selectedDate}
                presets={rangePresets}
                onChange={onRangeChange}
              />
            </Form.Item>
            <Form.Item>
              <Button type="default" htmlType="reset" onClick={handleReset}>
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Amap width="100%" height="300" />
        </Col>
      </Row>
    </>
  )
}
